.web-toast {
    position: fixed;
    line-height: 56px;
    font-size: 38px;
    border-radius: 10px;
    left: 50%;
    top: 18%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 9999;
    white-space: nowrap;
    padding: 24px 38px;
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: text;
}

.web-toast-normal {
    background-color: #046F4E;
    color: #FFFFFF;
}

.web-toast-warn {
    background-color: #FFFFFF;
    color: #F56C6C;
}

@keyframes toast-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes toast-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes toast-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-o-keyframes toast-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-ms-keyframes toast-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes toast-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes toast-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes toast-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes toast-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-ms-keyframes toast-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.toast-fade-out {
    animation: toast-fade-out .5s;
}

.toast-fade-in {
    animation: toast-fade-in .5s;
}